:root {
  --color-primary: #409eff;
  --color-primary-light-1: #53a8ff;
  --color-primary-light-2: #66b1ff;
  --color-primary-light-3: #79bbff;
  --color-primary-light-4: #8cc5ff;
  --color-primary-light-5: #a0cfff;
  --color-primary-light-6: #b3d8ff;
  --color-primary-light-7: #c6e2ff;
  --color-primary-light-8: #d9ecff;
  --color-primary-light-9: #ecf5ff;
  --color-primary-dark: #3a8ee6;
  --color-success: #67c23a;
  --color-warning: #e6a23c;
  --color-danger: #f56c6c;
  --color-info: #909399;
}

$--color-white: #fff;
$--color-black: #000;

$--color-primary: var(--color-primary);
$--color-primary-light-1: var(--color-primary-light-1);
$--color-primary-light-2: var(--color-primary-light-2);
$--color-primary-light-3: var(--color-primary-light-3);
$--color-primary-light-4: var(--color-primary-light-4);
$--color-primary-light-5: var(--color-primary-light-5);
$--color-primary-light-6: var(--color-primary-light-6);
$--color-primary-light-7: var(--color-primary-light-7);
$--color-primary-light-8: var(--color-primary-light-8);
$--color-primary-light-9: var(--color-primary-light-9);
$--color-primary-dark: var(--color-primary-dark);

$--color-success: #67c23a;
$--color-warning: #e6a23c;
$--color-danger: #f56c6c;
$--color-info: #909399;

$--color-success-light: mix($--color-white, $--color-success, 80%);
$--color-warning-light: mix($--color-white, $--color-warning, 80%);
$--color-danger-light: mix($--color-white, $--color-danger, 80%);
$--color-info-light: mix($--color-white, $--color-info, 80%);

$--color-success-lighter: mix($--color-white, $--color-success, 90%);
$--color-warning-lighter: mix($--color-white, $--color-warning, 90%);
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%);
$--color-info-lighter: mix($--color-white, $--color-info, 90%);

@mixin scrollBar {
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
  }
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    background-color: #f1f1f1;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
  }
  &::-webkit-scrollbar-thumb {
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    background-color: #c1c1c1;
  }
  &::-webkit-scrollbar-corner {
    background: #eff1f4;
  }
}
